var srch = document.getElementById("search_ipt")

var btns = document.getElementsByClassName("pa")
btns[0].classList.add("active")

// var page = [0]
var page = 0
var key = "all"
var type = "全部"

//
function getProductListJson(page=0,type='全部',key='all')
{
    var url = "info/productList.json"
    var request = new XMLHttpRequest();
    request.open("get",url)
    request.send(null)

    request.onload = function(){
        if(request.status == 200)
        {
            var json = JSON.parse(request.responseText)
            // console.log(json)
            var datass = json["product"]

            var elements = []
            var pagen = 1
            var curCount = 0

            var box = []
            for(var j = 0;j < datass.length;++j)
            {
                var datas = datass[j]
                datas = datas[j]

                for(var i = 0;i < datas.length;++i)
                {
                    var _type = datas[i]["type"]
                    var name = datas[i]["name"]
                    if((type=="全部" || _type == type) && (key == "all" || name.match(key)) )
                    {
                        var price = datas[i]["price"]
                        var scale = datas[i]["scale"]
                        var img = datas[i]["img"]
                        var tag = "<a href=\"#\" target=\"_blank\"><img src=\"" +img+ "\" alt=fgfg titile=\"" +name+ "\"><span>" +name+ "</span></a>"
                        +"<div><span>&yen;"+price+"</span><span> / "+scale+"</span><span class=\"buy\"></span></div>"
                        var newElemt = document.createElement("li")
                        newElemt.innerHTML = tag
                        box.push(newElemt)

                        curCount++;
                        if(box.length == 16)
                        {
                            console.log("box：")
                            console.log(box)
                            pagen++;
                            curCount = 0
                            elements.push(box)
                            box = []
                        }
                    }
                }
            }
            elements.push(box)
        }
        showProductList(elements,page)
    }
}

function showProductList(elements,page=0)
{
    console.log(elements)

    //页脚显示
    for(var i = 0;i < btns.length;++i)
    {
        if(i <  elements.length)
        {
            btns[i].style.display = ""
        }
        else
        {
            btns[i].style.display = "none"
        }
    }

    var boxs = elements[page]

    var box = document.getElementById("items_viewid")
    box.innerHTML = ""

    for(var j = 0;j < boxs.length;++j)
    {
        box.appendChild(boxs[j])
    }
    // for(var i = 0;i < elements.length && i < page;++i)
    // {
    //     var boxs = elements[page]
    //     var box = document.getElementById("items_viewid")
    //     box.innerHTML = ""

    //     for(var j = 0;j < boxs.length;++j)
    //     {
    //         box.appendChild(boxs[j])
    //     }
    // }
}

//page：数组，要查询的页面范围 type:字符串,要查询的类别
// function getProducts(page,type='全部',key='all')
// {
//     console.log(key)
//     var url = "info/productList.json"
//     var request = new XMLHttpRequest();
//     request.open("get",url)
//     request.send(null)

//     request.onload = function(){
//         if(request.status == 200)
//         {
//             var json = JSON.parse(request.responseText)
//             // console.log(json)
//             var datass = json["product"]

//             var box = document.getElementById("items_viewid")
//             box.innerHTML = ""

//             // console.log(datass.length)
//             for(var j = 0;j < datass.length && j < page.length;++j)
//             {
//                 var datas = datass[page[j]]
//                 datas = datas[page[j]]
//                 // console.log(datas)
//                 for(var i = 0;i < datas.length;++i)
//                 {
//                     var _type = datas[i]["type"]
//                     var name = datas[i]["name"]
//                     if((type=="全部" || _type == type) && (key == "all" || name.match(key)) )
//                     {
//                         var price = datas[i]["price"]
//                         var scale = datas[i]["scale"]
//                         var img = datas[i]["img"]
//                         var tag = "<a href=\"#\" target=\"_blank\"><img src=\"" +img+ "\" alt=fgfg titile=\"" +name+ "\"><span>" +name+ "</span></a>"
//                         +"<div><span>&yen;"+price+"</span><span> / "+scale+"</span><span class=\"buy\"></span></div>"
//                         var newElemt = document.createElement("li")
//                         newElemt.innerHTML = tag

//                         box.appendChild(newElemt)
//                     }
//                 }
//             }
//         }
//     }
// }

// getProducts(page,type)

var json = getProductListJson(page,type)

// ----------------------
console.log(btns)

function newListen(j)
{
        // var page=[]
        // page.push(i)
        // console.log(page)
        function a(){
        // getProducts([j],type)
        var json = getProductListJson(j,type)
        console.log(j)
        for(var k = 0;k < btns.length;++k)
        {
            console.log(k)

            if(k !== j)
            {
                btns[k].classList.remove("active")
            }
            else{
                btns[k].classList.add("active")
                page = k
                console.log(j)
            }
        }   
    }
    return a
}

for(var i = 0;i < btns.length;++i)
{
    console.log(i)
    btns[i].onclick = newListen(i)
}


//----------------------------

function searchs()
{
    var key = srch.value
    var url = "https://cn.bing.com/search?q="+key+"&search=&form=QBLH"
    window.location = url
}

function search()
{
    var _key = srch.value
    // getProducts([0,1,2,3,4,5],"全部",_key)
    getProductListJson(0,type,_key)
    btns[0].classList.add("active")
    
}
